<template>
    <ul id="box">
      <li v-for="data in dataList" :key="data.filmId"  @click='navigate(data.filmId)' >
        <div class='poster'>
            <img :src="data.poster" />
        </div>

        <div class='information'>
            <div class='title'>{{ data.name }}</div>
            <div class='content'>
                <div class="actors">主演：
                    <span>{{data.actors | actorsFilter}}</span>
                </div>
                <div>上映日期：{{data.premiereAt | premiereAtFilter}}</div>
            </div>
        </div>
        <div class='order' v-if='Date.now()<(data.premiereAt*1000)?true:false'>预约</div>
      </li>
    </ul>
</template>
<script>
// import axios from 'axios'
import http from '@/util/http'
import Vue from 'vue'
import moment from 'moment'
import { mapState } from 'vuex'
moment.locale('zh-cn')
Vue.filter('actorsFilter', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map((item) => item.name).join(' ')
})
Vue.filter('premiereAtFilter', (data) => {
  return moment(data * 1000).format('dddd MMM Do')
})
export default {
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=2&k=1154178`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then((res) => {
      this.dataList = res.data.data.films
    })
  },
  computed: {
    ...mapState(['cityId'])
  },
  methods: {
    navigate (id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
  #box {
    padding-bottom: 3.0625rem;
    background: white;
    width: 100%;
    li {
      height: 94px;
      padding: 15px;
      position: relative;
      img {
        height: 100%;
        float: left;
      }
      .poster{
          width:66px;
          height: 94px;
          float: left;
          img{
              width: 100%;
          }
      }
      .information {
          width: 60%;
          padding-top: 16px;
          padding-left:10px;
          float: left;
          .title{
              font-size: 16px;
          }
          .content{
              font-size: 13px;
              color:gray;
              .actors{
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin:4px 0;
              }
          }
      }
      .order{
        position: absolute;
        top:50%;
        right:10px;
        transform: translateY(-50%);
        color:#ffb232;
        border:1px solid #ffb232;
        padding:3px 10px;
        border-radius: 4px;
        font-size: 13px;
      }
    }
  }
</style>
